import { ExtractPropTypes, PropType } from 'vue';
import { MESSAGE_TYPE, DragConfigParams, TerminalViewerContentParams, TerminalCommandParams } from './terminalTypes';

export function terminalHeaderProps() {
  return {
    /** 终端标题 */
    title: {
      type: String,
      default: 'linpeng-web-terminal'
    }
  };
}

export function terminalViewerProps() {
  return {
    data: {
      type: Object as PropType<TerminalViewerContentParams>,
      default: () => ({
        class: null,
        type: MESSAGE_TYPE.NORMAL,
        content: null,
        tag: null
      })
    }
  };
}

const titleName = terminalHeaderProps().title.default;
export type TerminalProps = Readonly<ExtractPropTypes<ReturnType<typeof terminalProps>>>;
export function terminalProps() {
  return {
    ...terminalHeaderProps(),
    /** 终端API聚合类名称 */
    name: {
      type: String,
      default: ''
    },
    initLog: {
      type: Array as PropType<TerminalViewerContentParams[]>,
      default: () => {
        return [
          {
            type: 'normal',
            content: 'Terminal Initializing ...'
          },
          {
            type: 'normal',
            content: `Current login time: ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`
          },
          {
            type: 'html',
            content: `Welcome to linpeng web terminal! If you are using for the first time, you can use the <span class="t-cmd-key">help</span> command to learn.<div class="t-init-box">
            <p>Plugin version: <span class="t-cmd-key">${process.env.VUE_APP_VERSION}</span></p><p>Hello ${titleName}! ✋</p><p>Terminal version: vue2(<span class="t-cmd-key">2.6.10</span>), vue(<span class="t-cmd-key">1.7.1</span>)</p>
            <p>Instructions: <a class="t-a" target="_blank" href="http://res.dev.linpeng99.com/web-linpeng-plugin-doc/#/linpengTerminal/index">http://res.dev.linpeng99.com/web-linpeng-plugin-doc/#/linpengTerminal/index</a></p></div>`
          }
        ];
      }
    },
    /** 终端所属主机 */
    context: {
      type: String,
      default: '/linpeng-web-terminal'
    },
    /** 终端所属主机后缀 */
    contextSuffix: {
      type: String,
      default: ' > '
    },
    /** 命令格式化显示函数 */
    commandFormatter: {
      type: Function as PropType<(cmd: string) => any>
    },
    /**
     * 光标样式，可选值：Block, Underline, Bar, None
     */
    cursorStyle: {
      type: String,
      default: 'Block'
    },
    /** 光标闪烁开关 */
    cursorBlink: {
      type: Boolean,
      default: true
    },
    dragConfig: {
      type: Object as PropType<DragConfigParams>,
      default: () => ({
        width: 700,
        height: 500,
        zIndex: 100,
        init: {
          x: null,
          y: null
        },
        pinned: false
      })
    },
    /** 日志条数限制，输入的命令也算入一条日志 */
    logSizeLimit: {
      type: Number,
      default: 200
    },
    /** 滚动条滚动模式 html中scroll-behavior的值, smooth: 平滑过渡 */
    scrollMode: {
      type: String,
      default: 'smooth'
    },
    /** 显示终端头部 */
    showHeader: {
      type: Boolean,
      default: true
    },
    /** 命令折叠开关 */
    enableFold: {
      type: Boolean,
      default: true
    },
    /** 是否开启插件内部默认命令，如help等 */
    enableDefaultCommand: {
      type: Boolean,
      default: true
    },
    /** 行间距，单位像素 */
    lineSpace: {
      type: Number,
      default: 15
    },
    /** 所有自定义的指令信息列表(命令行搜索及help指令用) */
    commandStore: {
      type: Array,
      default: () => []
    },
    /** 是否启动自动搜索帮助 */
    autoHelp: {
      type: Boolean,
      default: true
    },
    /** 是否开启帮助提示 */
    enableHelpTip: {
      type: Boolean,
      default: true
    }
  };
}

/** 终端帮助提示 */
export function terminalHelpTipProps() {
  return {
    /** 提示指令内容 */
    tipCommand: {
      type: Object as PropType<TerminalCommandParams>,
      default: () => {
        return {
          usage: '',
          description: '',
          example: []
        };
      }
    },
    /** 头部标题 */
    tipTitle: {
      type: String,
      default: 'helpTip'
    }
  };
}
/** 终端下拉选择器 */
export function terminalSelectorProps() {
  return {
    selectVal: {
      type: String,
      default: ''
    },
    selectOptions: {
      type: Array as PropType<{ key: string; value: string }[]>,
      default: () => []
    },
    label: {
      type: String,
      default: '选择下拉'
    },
    width: {
      type: String,
      default: '300px'
    }
  };
}
